<template>
  <div class="myList">
    <div class="list">
      <ul>
        <!-- <li
          v-for="item in listData  "
          :key="item.product_id"
          @mouseover="overs"
          @mouseout="outs"
        > -->
        <li v-for="(item, index) in listData" :key="index">
          <!-- 分界线 -->
          <el-popover placement="top" width="160" :v-model="visible">
            <p>这是一段内容这是一段内容确定删除吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button type="primary" size="mini"
                 @click="del(item.product_id)">确定</el-button
              >
            </div>
           <span slot="reference" class="sp1" v-if="x">
              <i class="el-icon-close"></i
            ></span>
          </el-popover>



          <!-- <span class="sp1" v-if="x"> <i class="el-icon-close"></i></span> -->

          <!-- 分界线 -->
          <router-link
            :to="{ path: '/details', query: { productID: item.product_id } }"
          >
            <img
              :src="$target + item.product_picture"
              :alt="item.product_name"
            />
            <h2>{{ item.product_name }}</h2>
            <h3>{{ item.product_title }}</h3>
            <p>
              <span>{{ item.product_selling_price }}元</span>
              <span
                v-if="item.product_selling_price != item.product_price"
                class="del"
                >{{ item.product_price }}元</span
              >
            </p>
          </router-link>
        </li>
        <li class="lis" v-if="!isMore">
          <a @click="routerClick">
            浏览更多
            <i class="el-icon-d-arrow-right"></i>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import API from "../API/Api";
export default {
  name: "MyList",
  props: ["listData", "isMore", "x"],
  data() {
    return {
      boolean: false,
      visible: false,
    };
  },

  watch: {},

  created() {},

  mounted() {},

  methods: {
    routerClick() {
      console.log(this.listData);
      let arr = [];
      this.listData.forEach((item) => {
        arr.push(item.category_id);
      });
      console.log(arr);
      function data(arr) {
        return [...new Set(arr)];
      }
      let list = data(arr);
      this.$router.push({ path: "/goods", query: { productID: list } });
    },
    overs() {
      this.boolean = true;
    },
    outs() {
      this.boolean = false;
    },
    del(product_id) {
      API.deleteCollect({
        product_id: product_id,
        user_id: this.$store.state.user_id,
      }).then((res) => {
        console.log(res);
      });
      this.visible = false;
    },
  },

  computed: {},
};
</script>

<style scoped>
* {
  color: #000;
  text-decoration: none;
  list-style: none;
}
.list {
  float: left;
}
/* .list ul li:nth-child(5n){
  margin-left: 0px;
} */
.list ul li {
  float: left;
  width: 234px;
  height: 280px;
  padding: 10px 0;
  margin: 0 0 14.5px 13.7px;
  background-color: #fff;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  position: relative;
  cursor: pointer;
}
.list ul li:hover {
  transform: translateY(-4px);
  box-shadow: 0px 13px 13px rgb(218, 213, 213);
}
.list ul li img {
  display: block;
  margin: 0 auto;
  width: 160px;
  height: 160px;
}
.list ul li h2 {
  margin-top: 25px;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.list ul li h3 {
  margin: 5px 10px;
  font-weight: 500;
  height: 18px;
  font-size: 12px;
  text-align: center;
  color: #b0b0b0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.list ul li p {
  margin: 10px 10px 10px;
  text-align: center;
  color: #ff6700;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.list ul li p span:nth-child(1) {
  text-align: center;
  color: #ff6700;
}
.del {
  margin-left: 0.5em;
  color: #b0b0b0;
  text-decoration: line-through;
}
.appliances {
  width: 100%;
  height: 673px;
  margin-top: 20px;
}
.lis {
  text-align: center;
  line-height: 280px;
  cursor: pointer;
  float: left;
  font-size: 18px;
}
.lis a {
  color: #000;
  text-decoration: none;
}
.lis a:hover {
  color: orange;
}
/* .sp1{
  position: absolute;
  top: 8px;
  right: 8px;
  display: none;
} */
.sp1 {
  position: absolute;
  top: 8px;
  right: 8px;
  opacity: 0;
}
.sp1:hover {
  opacity: 1;
}
</style>